<template>
    <el-container>
      <el-main>
        <div class="header">
          <h5>商家信息管理</h5>
          <p>温馨提示:
            <i>完成信息核实和诚信会员认证，您的店铺就可在用户端上架，您也可以进行广告推广服务。</i>
            <i style="color: orangered">及时刷新页面查看状态</i>
          </p>
        </div>
        <ul>
          <li>
            <h5>会员信息</h5>
          </li>
          <li  @click="goInfo">
            <p><i class="iconfont icon-gerenxinxi"></i><strong>信息核实:</strong>
              <b v-if="userInfo.infoStatus == 0">暂未核实</b>
              <b style="color: red" v-if="userInfo.infoStatus == 1">核实中</b>
              <b style="color: red" v-if="userInfo.infoStatus == 2">已核实</b>
              <b style="color: orange" v-if="userInfo.infoStatus == 3">已退回</b>
            </p>
            <p>去完善信息 <i class="el-icon-arrow-right"></i></p>
          </li>
          <li  @click="goInfo2">
            <p><i class="iconfont icon-xunzhang" style="font-weight: normal"></i>
              <strong>诚信会员:</strong>
              <b  v-if="userInfo.memberStatus == 0">未认证</b>
              <b style="color: red" v-if="userInfo.memberStatus == 1">已认证 <i style="font-size: 12px">{{userInfo.deadTime}}</i></b>
            </p>
            <p>去购买认证 <i class="el-icon-arrow-right"></i></p>
          </li>
          <li  @click="goInfo3">
            <p><i class="iconfont icon-baozhang" style="font-weight: normal"></i><strong>平台售后担保:</strong>
              <b v-if="userInfo.afterService == 0">未开通</b>
              <b style="color: red" v-if="userInfo.afterService == 1">已开通</b>
            </p>
            <p>去开通 <i class="el-icon-arrow-right"></i></p>
          </li>
        </ul>
        <ul class="second">
          <li  @click="goInfo4">
            <p><strong>广告服务</strong> </p>
            <p>去购买 <i class="el-icon-arrow-right"></i></p>
          </li>
          <li  @click="goGuanLi">
            <p><strong>广告管理</strong></p>
            <p><i class="el-icon-arrow-right"></i></p>
          </li>
        </ul>
        <ul class="three">
          <li  @click="goShare">
            <p><strong>分享得奖励</strong> </p>
            <p><i class="el-icon-arrow-right"></i></p>
          </li>
          <li  @click="goNews">
            <p><strong>消息提醒</strong> </p>
            <p><el-badge :value="this.unread" class="item"></el-badge> <i class="el-icon-arrow-right"></i></p>
          </li>
          <li>
            <p><strong>联系次数</strong> </p>
            <p style="color: #5193ff"><i style="color: #5193ff">{{userInfo.num}}</i>次</p>
          </li>
          <li  @click="changePassword">
            <p><strong>修改密码</strong> </p>
            <p><i class="el-icon-arrow-right"></i></p>
          </li>
        </ul>
        <span>
          <el-button type="primary" @click="call">拨打客服热线</el-button>
        </span>
        <span>
          <p><b @click="goLogin">退出登录</b></p>
        </span>

      </el-main>
    </el-container>
</template>

<script>
  import qs from 'qs'
    export default {
        data(){
          return{
            userInfo:[],
            info:null,
            id:'',
            unread:'',//消息未读
          }
        },
      beforeRouteEnter(to,from,next){
        let url = 'http://ysh.youzainet.com/dist/index.html';//重定向地址
        let appid = 'wx2b24b51cea5a033d';
        let isfirstLogin = localStorage.getItem('isfirstLogin');
        if(isfirstLogin === 'true'){
          if(localStorage.getItem("openId")){
            if(!localStorage.getItem('session_token')){
              localStorage.setItem('isfirstLogin','false');
              next('/login')
            }else {
              localStorage.setItem('isfirstLogin','false');
              next()
            }
          }else {
            let  str = window.location.href;
            str = str.split('code=')[1];
            str = str.split('&')[0];
            window.sessionStorage.setItem('code',str);
            if(!localStorage.getItem('session_token')){
              localStorage.setItem('isfirstLogin','false');
              next({path:'/login'})
            }else {
              localStorage.setItem('isfirstLogin','false');
              next();
            }
          }
       }else if(isfirstLogin == null){
         window.location.href =
           'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+url+'&response_type=code&response_type=code&scope=snsapi_base&state=123#wechat_redirect';
          localStorage.setItem('isfirstLogin','true')
       }else {
         next()
       }
      },
      created(){
          let params = {
            merchantId:localStorage.getItem("merchantId")
          };

          this.$axios.post('/api/front/merchant/checkMerchantStatus',qs.stringify(params))
            .then(res => {
             this.userInfo = res.data.obj;
             localStorage.setItem('infoStatus',res.data.obj.infoStatus)

            })
          this.$axios.post('/api/front/msg/unread',qs.stringify(params))
            .then(res => {
              this.unread = res.data.obj
            })
      },
      mounted(){

      },
      computed:{
          info(){
            return this.$store.state.info
        },
        id(){
          return this.$store.state.merchantId
        }
      },
      methods:{
        goInfo(){
             this.$router.push('/information')
          },
        goInfo2(){
           if(this.userInfo.infoStatus !=2){
              this.$message.warning('请先通过审核后购买');
              return;
           }
              this.$router.push('/renzheng')


        },
        goInfo3(){
          if(this.userInfo.infoStatus !=2){
            this.$message.warning('请先通过审核后购买');
            return;
          }
          this.$router.push('/renzheng')
        },
        goInfo4(){
          if(this.userInfo.infoStatus !=2){
            this.$message.warning('请先通过审核后购买');
            return;
          }
          if(this.userInfo.memberStatus == 0 ){
            this.$message.warning('请先通过认证后购买');
            return;
          }
          if(this.userInfo.infoStatus == 2 && this.userInfo.memberStatus == 1 ){
            this.$router.push('/guanggao/renzheng2')
          }else {
            this.$message.warning('当前购买人数过多，请稍后重试!');
          }

        },
        goGuanLi(){
          if(this.userInfo.infoStatus !=2){
            this.$message.warning('请先通过审核后购买');
            return;
          }
          if(this.userInfo.memberStatus == 0 ){
            this.$message.warning('请先通过认证后购买');
            return;
          }
          if(this.userInfo.infoStatus == 2 && this.userInfo.memberStatus == 1 ){
            this.$router.push('/guanggaoguanli')
          }else {
            this.$message.warning('当前购买人数过多，请稍后重试!');
          }

        },
        goShare(){
          this.$router.push('/share')
          // this.$router.push({name:'share',params:{code:userInfo.invitationCode}})
        },
        goNews(){
          this.$router.push('/news')
        },
        changePassword(){
          this.$router.push('/changePassword')
        },
        call(){
          this.$axios.post('api/user/merchantInfo/get_platform_phone')
            .then(res => {
              window.location.href = 'tel://'+ res.data.obj;
            })

        },
        goLogin(){
          localStorage.removeItem('userId');
          localStorage.removeItem('majorType');
          localStorage.removeItem('session_token');
          localStorage.removeItem("merchantId");
          localStorage.removeItem('isfirstLogin')
          this.$router.push('/login')
        }

      },
      // beforeDestroy(){
      //   localStorage.removeItem('code')
      //   localStorage.removeItem('isfirstLogin')
      // },
    }
</script>

<style scoped lang="scss">
.el-container{
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  height: 100%;
  .el-main{
    .header{
      background: #fff;
      padding: 10px 0;
      margin-bottom: 10px;
      h5{
        margin: 0 ;
        font-size: 16px;
        font-weight: normal;
      }
      p{
        color: red;
        text-align: left;
        padding: 0 15px;
        font-size: 13px;
        i{
          margin-left: 10px;
          font-style: normal;

        }
      }
    }
    ul{
      li{
        background: #fff;
        display: flex;
        flex-direction: row;
        padding: 10px 0;
        border-bottom: 2px solid #f1f1f1;
        h5{
          margin: 0px;
          font-size: 16px;
          text-align: left;
          padding-left: 15px;
          font-weight: normal;
        }
        p{
          width: 30%;
          margin: 0;
          padding: 0;
          margin-left: 15px;
          &:nth-child(1){
            width: 70%;
            text-align: left;
            display: inline-block;
            vertical-align: middle;
            i{
              vertical-align: middle;
              font-size: 24px;
              color: red;
              font-weight: bold;

            }
            strong{
              vertical-align: middle;
              margin-left: 10px;
              font-size: 16px;
              font-weight: normal;
            }
            b{
              vertical-align: middle;
              margin-left: 10px;
              font-size: 14px;
              color: #ccc;
            }
          }
          &:nth-child(2){
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            text-align: right;
            color: red;
            font-size: 14px;
            i{
              display: inline-block;
              vertical-align: middle;
              padding-left: 0;
              color: #ccc;
              font-weight: bold;
            }
          }

        }
      }
      &.second,&.three{
        margin: 10px 0;
        strong{
          margin-left: 0!important;
        }
      }
    }
    span{
      display: flex;
      flex-direction: row;
      justify-content: center;
      .el-button{
        margin: 20px auto;
      }
      p{
        width: 80%;
        padding: 10px 0;
        background: orangered;
        font-size: 16px;
        color: #fff;
        letter-spacing: 2px;
        margin-bottom: 100px;
        border-radius: 6px;
      }
    }

  }
}
</style>
